<template>
	<div class="label-warp">
		<div class="label">
			<label :style="labelStyle" v-if="labelName">{{labelName}}</label>
			<div class="input">
				<slot></slot>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		labelName: String,
		labelWidth: [Number, String]
	},
	computed: {
		labelStyle() {
			const ret = {}
			let parent = this.$parent
			// 递归父组件，哪个组件props里有labelWidth或者属性attr里有labelWidth就取当前$parent
			while (parent && !parent.labelWidth && !parent.$attrs.labelWidth) {
				parent = parent.$parent
			}
			const parentLabelWidth = parent ? parent.labelWidth || parent.$attrs.labelWidth : null
			const labelWidth = this.labelWidth || parentLabelWidth || 60
			if (labelWidth) {
				ret.width = labelWidth * 1 + 'px'
			}
			return ret
		}
	}
}
</script>
<style lang="scss" scoped>
.label-warp {
	// margin: 15px 0 0;
	vertical-align: middle;
	min-width: 300px;
	padding-right: 10px;
	box-sizing: border-box;
	// float: left;
	.label {
		display: flex;
		// align-items: center;
		font-size: 14px;
		line-height: 32px;
		label {
			height: 32px;
			line-height: 32px;
			padding-right: 10px;
		}
		.input {
			flex: 1;
			color: $color-text-secondary;
		}
	}
}
.label + .label {
	padding-left: 10px;
}
</style>
